<script setup>
  import { ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  const orderList = ref([])
  const currentPage = ref(1)
  async function getList() {
    const res = await http.request({
      url: '/api/delivery/deliveryList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        status: current.value,
      },
    })
    orderList.value = [...orderList.value, ...res.data]
  }

  const items = ref(['全部订单', '待发货', '待收货', '已完成'])
  const current = ref(0)
  function onClickItem(index) {
    if (current.value !== index) {
      current.value = index
    }
    currentPage.value = 1
    orderList.value = []
    getList()
  }

  // 查看订单详情
  function goDetail(id) {
    uni.navigateTo({
      url: `/minePage/orderdetail/index?id=${id}&from=${'order'}`,
    })
  }

  // 确认收货
  async function shure(id) {
    const res = await http.request({
      url: '/api/delivery/confirmOrder',
      method: 'POST',
      data: {
        id: id,
      },
    })

    if (res.st == 1) {
      uni.utils.toast('确认收货成功')
      currentPage.value = 1
      orderList.value = []
      getList()
    } else {
      uni.utils.toast(res.msg)
    }
  }

  function refresh() {
    ++currentPage.value
    getList()
  }

  onLoad((option) => {
    console.log(option.index)
    current.value = option.index
  })
  onShow(() => {
    currentPage.value = 1
    orderList.value = []
    getList()
  })
</script>

<template>
  <view class="order-content">
    <view class="order-category">
      <view class="category-list">
        <view
          class="list-item"
          v-for="(item, index) in items"
          :key="'items' + index"
          @click="onClickItem(index)"
        >
          <view class="list-name"> {{ item }} </view>
          <view class="bar" v-if="index == current"> </view>
          <view class="bar" style="background-color: transparent" v-else>
          </view>
        </view>
      </view>
      <view class="content" v-if="orderList.length">
        <scroll-view
          scroll-y="true"
          class="scroll-Y"
          style="height: 94vh"
          @scrolltolower="refresh"
        >
          <view v-if="current == 0">
            <view
              class="content-text"
              v-for="(item, index) in orderList"
              :key="'order' + index"
              @click="goDetail(item.id)"
            >
              <view class="content-title">
                <view class="title-left">
                  <text style="color: #9b9b9d">订单号：</text>
                  <text>{{ item.order_sn }}</text>
                </view>
                <view
                  class="title-right"
                  v-if="item.status == 2 || item.status == 3"
                >
                  待发货
                </view>
                <view class="title-right" v-if="item.status == 4">
                  待收货
                </view>
                <view class="title-right" v-if="item.status == 5">
                  已完成
                </view>
              </view>
              <view class="the-order-content">
                <view
                  class="order-item"
                  v-for="(goods, goodsindex) in item.goods_info"
                  :key="'goods' + goodsindex"
                >
                  <view class="order-item-left">
                    <view class="order-item-left-img">
                      <image
                        style="width: 128rpx; height: 128rpx"
                        :src="goods.goods_info.img"
                        mode=""
                      ></image>
                    </view>
                    <view class="order-item-left-content">
                      <view class="">
                        {{ goods.goods_info.goods_name }}
                      </view>
                      <!-- <view
											class=""
											style="
												font-size: 20rpx;
												color: #898989;
											"
										>
											红色,128g
										</view> -->
                      <view class=""> ￥{{ goods.box_price }} </view>
                    </view>
                  </view>
                  <view class="order-item-right"> X{{ goods.num }}</view>
                </view>
              </view>
              <view class="content-bottom">
                <view class="price" v-if="item.status == 2">
                  实付：￥{{ item.money }}
                </view>
                <view class="two-button" v-if="item.status == 4">
                  <!-- <view class=""> 查看物流 </view> -->
                  <view class="" @tap.stop="shure(item.id)"> 确认收货 </view>
                </view>
                <view class="one-button" v-if="item.status == 5">
                  <!-- <view class=""> 删除订单 </view> -->
                </view>
              </view>
            </view>
          </view>
          <view v-if="current == 1">
            <view
              class="content-text"
              v-for="(item, index) in orderList"
              :key="'order' + index"
              @click="goDetail(item.id)"
            >
              <view class="content-title">
                <view class="title-left">
                  <text style="color: #9b9b9d">订单号：</text>
                  <text>{{ item.order_sn }}</text>
                </view>
                <view
                  class="title-right"
                  v-if="item.status == 2 || item.status == 3"
                >
                  待发货
                </view>
                <view class="title-right" v-if="item.status == 4">
                  待收货
                </view>
                <view class="title-right" v-if="item.status == 5">
                  已完成
                </view>
              </view>
              <view class="the-order-content">
                <view
                  class="order-item"
                  v-for="(goods, goodsindex) in item.goods_info"
                  :key="'goods' + goodsindex"
                >
                  <view class="order-item-left">
                    <view class="order-item-left-img">
                      <image
                        style="width: 128rpx; height: 128rpx"
                        :src="goods.goods_info.img"
                        mode=""
                      ></image>
                    </view>
                    <view class="order-item-left-content">
                      <view class="">
                        {{ goods.goods_info.goods_name }}
                      </view>
                      <!-- <view
											class=""
											style="
												font-size: 20rpx;
												color: #898989;
											"
										>
											红色,128g
										</view> -->
                      <view class=""> ￥{{ goods.box_price }} </view>
                    </view>
                  </view>
                  <view class="order-item-right"> X{{ goods.num }}</view>
                </view>
              </view>
              <view class="content-bottom">
                <view class="price" v-if="item.status == 2">
                  实付：￥{{ item.money }}
                </view>
                <view class="two-button" v-if="item.status == 4">
                  <!-- <view class=""> 查看物流 </view> -->
                  <view class="" @tap.stop="shure(item.id)"> 确认收货 </view>
                </view>
                <view class="one-button" v-if="item.status == 5">
                  <!-- <view class=""> 删除订单 </view> -->
                </view>
              </view>
            </view>
          </view>
          <view v-if="current == 2">
            <view
              class="content-text"
              v-for="(item, index) in orderList"
              :key="'order' + index"
              @click="goDetail(item.id)"
            >
              <view class="content-title">
                <view class="title-left">
                  <text style="color: #9b9b9d">订单号：</text>
                  <text>{{ item.order_sn }}</text>
                </view>
                <view
                  class="title-right"
                  v-if="item.status == 2 || item.status == 3"
                >
                  待发货
                </view>
                <view class="title-right" v-if="item.status == 4">
                  待收货
                </view>
                <view class="title-right" v-if="item.status == 5">
                  已完成
                </view>
              </view>
              <view class="the-order-content">
                <view
                  class="order-item"
                  v-for="(goods, goodsindex) in item.goods_info"
                  :key="'goods' + goodsindex"
                >
                  <view class="order-item-left">
                    <view class="order-item-left-img">
                      <image
                        style="width: 128rpx; height: 128rpx"
                        :src="goods.goods_info.img"
                        mode=""
                      ></image>
                    </view>
                    <view class="order-item-left-content">
                      <view class="">
                        {{ goods.goods_info.goods_name }}
                      </view>
                      <!-- <view
											class=""
											style="
												font-size: 20rpx;
												color: #898989;
											"
										>
											红色,128g
										</view> -->
                      <view class=""> ￥{{ goods.box_price }} </view>
                    </view>
                  </view>
                  <view class="order-item-right"> X{{ goods.num }}</view>
                </view>
              </view>
              <view class="content-bottom">
                <view class="price" v-if="item.status == 2">
                  实付：￥{{ item.money }}
                </view>
                <view class="two-button" v-if="item.status == 4">
                  <!-- <view class=""> 查看物流 </view> -->
                  <view class="" @tap.stop="shure(item.id)"> 确认收货 </view>
                </view>
                <view class="one-button" v-if="item.status == 5">
                  <!-- <view class=""> 删除订单 </view> -->
                </view>
              </view>
            </view>
          </view>
          <view v-if="current == 3">
            <view
              class="content-text"
              v-for="(item, index) in orderList"
              :key="'order' + index"
              @click="goDetail(item.id)"
            >
              <view class="content-title">
                <view class="title-left">
                  <text style="color: #9b9b9d">订单号：</text>
                  <text>{{ item.order_sn }}</text>
                </view>
                <view
                  class="title-right"
                  v-if="item.status == 2 || item.status == 3"
                >
                  待发货
                </view>
                <view class="title-right" v-if="item.status == 4">
                  待收货
                </view>
                <view class="title-right" v-if="item.status == 5">
                  已完成
                </view>
              </view>
              <view class="the-order-content">
                <view
                  class="order-item"
                  v-for="(goods, goodsindex) in item.goods_info"
                  :key="'goods' + goodsindex"
                >
                  <view class="order-item-left">
                    <view class="order-item-left-img">
                      <image
                        style="width: 128rpx; height: 128rpx"
                        :src="goods.goods_info.img"
                        mode=""
                      ></image>
                    </view>
                    <view class="order-item-left-content">
                      <view class="">
                        {{ goods.goods_info.goods_name }}
                      </view>
                      <!-- <view
											class=""
											style="
												font-size: 20rpx;
												color: #898989;
											"
										>
											红色,128g
										</view> -->
                      <view class=""> ￥{{ goods.box_price }} </view>
                    </view>
                  </view>
                  <view class="order-item-right"> X{{ goods.num }}</view>
                </view>
              </view>
              <view class="content-bottom">
                <view class="price" v-if="item.status == 2">
                  实付：￥{{ item.money }}
                </view>
                <view class="two-button" v-if="item.status == 4">
                  <!-- <view class=""> 查看物流 </view> -->
                  <view class="" @tap.stop="shure(item.id)"> 确认收货 </view>
                </view>
                <view class="one-button" v-if="item.status == 5">
                  <!-- <view class=""> 删除订单 </view> -->
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view
        class="content"
        v-else
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 200rpx;
        "
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/order-null.png"
          style="width: 218rpx; height: 218rpx"
          mode=""
        ></image>
        <view
          class=""
          style="margin-top: 16rpx; font-size: 26rpx; color: #cacaca"
        >
          暂无订单
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .order-content {
    height: 100vh;
    background-color: #f4f4f4;
    color: #3d3d3d;
    .order-category {
      .category-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22rpx;
        padding-bottom: 22rpx;
        background-color: #fff;
        .list-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .list-name {
            font-size: 24rpx;
            color: #3d3d3d;
          }
          .bar {
            width: 52rpx;
            height: 8rpx;
            border-radius: 4rpx;
            margin-top: 4rpx;
            background-color: $all-color;
          }
        }
      }
      .content {
        margin-top: 20rpx;
        .content-text {
          padding: 0 20rpx;
          margin-bottom: 20rpx;
          box-sizing: border-box;
          background-color: #fff;
          .content-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 74rpx;
            border-bottom: 2rpx solid #f5f5f5;
            font-size: 22rpx;
            .title-right {
              color: #f58300;
            }
          }
          .the-order-content {
            border-bottom: 2rpx solid #f5f5f5;
            .order-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 180rpx;
              &:last-child {
                border-bottom: 2rpx solid #f5f5f5;
              }
              .order-item-left {
                display: flex;
                align-items: center;
                .order-item-left-img {
                  height: 128rpx;
                  width: 128rpx;
                  margin-right: 18rpx;
                  box-sizing: border-box;
                  border-radius: 8rpx;
                  overflow: hidden;
                }
                .order-item-left-content {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  height: 128rpx;
                  font-size: 24rpx;
                  color: #1a1a1a;
                }
              }
              .order-item-right {
                font-size: 24rpx;
                color: #1a1a1a;
              }
            }
          }
          .content-bottom {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 96rpx;
            .price {
              text-align: right;
              line-height: 96rpx;
              font-size: 28rpx;
            }
            .two-button {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              view {
                width: 138rpx;
                height: 52rpx;
                border-radius: 26rpx;
                // border: 2rpx solid #9b9b9d;
                font-size: 20rpx;
                text-align: center;
                line-height: 52rpx;
                &:last-child {
                  margin-left: 22rpx;
                  background-color: $all-color;
                  color: #3d3d3d;
                }
              }
            }
            .one-button {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              view {
                width: 138rpx;
                height: 52rpx;
                border-radius: 26rpx;
                border: 2rpx solid #9b9b9d;
                font-size: 20rpx;
                text-align: center;
                line-height: 52rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
